import React from 'react';
import Footer from '../widget/footer/footer.jsx';
import './message.scss';
import '../index/index.scss';
import {
	Link
} from 'react-router-dom';
import { getChatList } from 'api/message.js';
class Message extends React.Component{
	constructor (props) {
		super(props)
		this.state={
			messageLIst: []
		}
	}
	componentDidMount(){
		document.title = '消息';
		getChatList().then(res => {
			if(res.code === 1){
				this.setState({
					messageLIst: res.data
				})
			}
		})
	}
	render() {
		return(
			<div className='message'>
				{/*<div className="title">
					<div><i className="glyphicon glyphicon-close"></i></div>
					<div>消息</div>
					<div><i className="glyphicon glyphicon-options"></i></div>
				</div>*/}
				<div className="message_content">
				{
					this.state.messageLIst.map((item,index) => {
						return(
							<Link to={
								{
									pathname: `${window.baseUrl}/messageCont`,
									state: {
										roomId: item.chat_room,
										nickname: item.nickname
									}
								}
							} className="message_list" key={index}>
								<div style={{flex: 1}}>
									<img src={item.avatar} className="message_img" alt="lalal"/>
									<div>
										<p className="message_title">{item.nickname.length > 7 ? item.nickname.split(0, 6) + '...' : item.nickname}</p>
										<p className="message_text">{item.last_msg}</p>
									</div>
								</div>
								<div className="message_time">
									{item.time} 
								</div>
								{
									item.unread === 0 ? '' : <span className="message_weidu">{item.unread}</span>
								}
							</Link>
						)
					})
				}
				</div>
				<Footer/>
			</div>
			)
	}
}
export default Message;
